<template>
  <div class="list">
    <div class="box">
      <div class="header">
        <div class="item-text box-title">
          关键词：<span class="number-of-enterpise">{{ key_words }}</span>
        </div>
        <div class="item-text box-title">
          为您找到相关企业至少 <span class="number-of-enterpise">{{ number }}</span> 家
        </div>
        <div class="item right">
          <el-button
            type="primary"
            @click="handleSetUserStoreComp"
          >
            <ali-icon icon="iconshizijiahao2"></ali-icon>
            收藏企业
          </el-button>
        </div>
      </div>
      <div class="list-view box">
        <el-table
        class="list-table"
          :data="tableData"
          @selection-change="handleSelectionChange"
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            prop="tel"
            label="电话"
            type="expand"
            class-name="phone-cell"
          >
            <template slot-scope="{ row }">
              <el-table :data="row.tel">
                <el-table-column label="姓名" prop="name"> </el-table-column>
                <el-table-column label="联系方式" prop="telephone" />
                <el-table-column label="呼叫">
                  <template slot-scope="{ row }">
                    <span v-if="row.is_call">已呼叫</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column label="预约信息">
                  <template slot-scope="{ row }">
                    <div @click="alertReservationDialogVisible(row)">
                      <ali-icon
                        icon="iconshizijiahao2"
                        style="font-size: 1rem; color: #22ac38"
                      />
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="提示信息" prop="tips" />
                <el-table-column label="标记信息" prop="mark" />
                <el-table-column label="准确度" prop="accuracy" />
                <el-table-column label="来源" prop="source" />
                <el-table-column label="号码检测" prop="checked" />
                <el-table-column label="电话标签">
                  <template slot-scope="{ row }">
                    <template v-if="row.marks">
                      <span>{{ row.marks }}</span>
                    </template>
                    <template v-else>
                      <div @click="alertPhoneDialogVisible(row)">
                        <ali-icon
                          icon="iconshizijiahao2"
                          style="font-size: 1rem; color: #22ac38"
                        />
                      </div>
                    </template>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            prop="company_name"
            label="企业名称"
            width="180"
          >
          </el-table-column>
          <el-table-column
            prop="industry"
            label="所属行业"
          >
          </el-table-column>
          <el-table-column
            prop="address"
            label="所属地区"
          >
          </el-table-column>
          <el-table-column
            prop="start_date"
            label="注册日期"
          >
          </el-table-column>
          <el-table-column
            prop="regist_capi"
            label="注册资本"
          >
          </el-table-column>
          <el-table-column
            prop="status"
            label="企业状态"
          >
          </el-table-column>
          <el-table-column
            prop="id"
            label="综合指数"
          >
          </el-table-column>
          <el-table-column
            prop="id"
            label="企业信息"
          >
            <template slot-scope="{ row }">
              <a @click="toDetail(row.company_id)">企业详情</a>
            </template>
          </el-table-column>
        </el-table>
        <page
          :total="total"
          :current.sync="params.page"
          :size.sync="params.size"
          @change="search"
        />
        <el-dialog title="电话标签" :visible.sync="phoneDialogVisible" width="30%">
          <el-form
            :model="phoneForm"
            inline
            :rules="phoneFormRules"
            ref="phoneForm"
            label-position="left"
          >
            <el-form-item
              label="联系方式反馈"
              :label-width="labelWidth"
              prop="contact_details"
              class="phone-dialog-visible-form-item"
            >
              <el-radio-group v-model="phoneForm.contact_details" size="small">
                <template v-for="(item, index) in contactDetailData">
                  <el-radio :key="index" :label="item.key" border>
                    {{ item.name }}
                  </el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="意向类别反馈"
              :label-width="labelWidth"
              prop="intent_categorys"
              class="phone-dialog-visible-form-item"
            >
              <el-radio-group v-model="phoneForm.intent_categorys" size="small">
                <template v-for="(item, index) in intentCategoryData">
                  <el-radio :key="index" :label="item.key" border>{{
                    item.name
                  }}</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="线索质量反馈"
              :label-width="labelWidth"
              prop="clue_feedbacks"
              class="phone-dialog-visible-form-item"
            >
              <el-radio-group v-model="phoneForm.clue_feedbacks" size="small">
                <template v-for="(item, index) in clueFeedbackData">
                  <el-radio :key="index" :label="item.key" border>{{
                    item.name
                  }}</el-radio>
                </template>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="setMarks">确 定</el-button>
            <el-button @click="phoneDialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title="预约标签"
          :visible.sync="reservationDialogVisible"
          width="30%"
          center
        >
          <el-form
            :model="reservationForm"
            inline
            :rules="reservationFormRules"
            ref="reservationForm"
            label-position="left"
          >
            <el-form-item label="当前预约" :label-width="labelWidth">
              <div
                v-if="appointments.length < 1"
                style="font-size: 0.8rem; color: #999"
              >
                无预约
              </div>
              <div v-else>
                <el-table
                  :data="appointments"
                  height="150"
                  style="min-width: 26rem"
                >
                  <el-table-column prop="appointment" label="预约信息" />
                  <el-table-column prop="appointment_date" label="预约日期" />
                </el-table>
              </div>
            </el-form-item>
            <el-form-item
              label="新增预约"
              :label-width="labelWidth"
              prop="appointment_date"
            >
              <el-date-picker
                v-model="reservationForm.appointment_date"
                type="datetime"
                placeholder="选择日期"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item prop="appointment">
              <el-input
                type="textarea"
                v-model="reservationForm.appointment"
                placeholder="编辑预约信息"
              />
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="setAppointment">预 约</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { index } from "@/api/example/blank"
import { fetchRegion } from "@/api"
import Page from "@/components/list/page"
import { setUserStoreComp } from "@/api/portrait/portrait"
import {
  setMarks,
  setAppointment,
  getAppointments,
} from "@/api/collection/collection"

export default {
  components: {
    Page
  },
  data() {
    const contactDetailData = this.$config("index", 'contactDetailData')
    const intentCategoryData = this.$config("index", 'intentCategoryData')
    const clueFeedbackData = this.$config("index", 'clueFeedbackData')

    return {
      labelWidth: "100%",
      number: 307,
      total:100,
      regions: [],
      key_words: '',
      tableData:[
        {
          id: 123,
          company_id: 1453633,
          tel: [
            { id: 1 }
          ]
        }
      ],
      loading: false,
      condition: {
        page:1,
        size:10,
      },
      params: {
        page:1,
        pagesize:10,
        keyWord: '',
        area: '',
        hangye: ''
      },
      // 电话标签
      phoneDialogVisible: false,
      phoneForm: {
        id: 0,
        contact_details: '',
        intent_categorys: '',
        clue_feedbacks: '',
      },
      phoneFormRules: {
        contact_details: [
          { type: "string", message: "验证", trigger: "change" },
        ],
        intent_categorys: [
          { type: "string", message: "验证", trigger: "change" },
        ],
        clue_feedbacks: [
          { type: "string", message: "验证", trigger: "change" },
        ],
      },
      contactDetailData,
      intentCategoryData,
      clueFeedbackData,
      // 预约标签
      reservationDialogVisible: false,
      appointments: [],
      reservationForm: {
        id: 0,
        appointment_date: "",
        appointment: "",
      },
      reservationFormRules: {
        appointments: [{ type: "string", message: "验证", trigger: "change" }],
        appointment_date: [
          { type: "date", message: "验证", trigger: "change" },
        ],
        appointment: [{ type: "string", message: "验证", trigger: "change" }],
      }
    }
  },
  created() {
    this.getRegion()
    this.key_words = this.$route.query.company_name
    this.params.keyWord=this.$route.query.company_name
    this.search()
  },
  methods: {
    getRegion() {
      fetchRegion(res => {
        if (res.code === 200) {
          this.regions = res.data
        }
      });
    },
    search(){
      this.loading = true

      index(this.params, response => {
        this.loading = false
        this.tableData = response.data
        this.total = response.meta.total
        this.number = response.meta.total
      })
    },
    toDetail(id) {
      this.$router.push({
        path: 'merchants/merchants/detail/:id',
        name: 'merchants/merchants/detail',
        params: {
          id: id
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSetUserStoreComp() {
      var output = [];
      for (var i=0; i < this.multipleSelection.length ; ++i)
          output.push(this.multipleSelection[i].company_id)
      
      setUserStoreComp({ company_id: output.join(",") }, response => {
        if (response.code === 200) {
          this.$message({
            message: '收藏成功',
            type: 'success'
          })
        }
      })
    },
    // 电话标签,预约标签
    alertPhoneDialogVisible(row) {
      this.phoneForm.id = row.id;
      this.phoneDialogVisible = true;
    },
    alertReservationDialogVisible(row) {
      this.reservationForm.id = row.id;
      this.reservationDialogVisible = true;
      // 查询当前预约
      this.getAppointments(row.id);
    },
    setMarks() {
      this.phoneDialogVisible = false;
      let marks = []
      if (this.phoneForm.contact_details) marks.push(this.phoneForm.contact_details)
      if (this.phoneForm.intent_categorys) marks.push(this.phoneForm.intent_categorys)
      if (this.phoneForm.clue_feedbacks) marks.push(this.phoneForm.clue_feedbacks)
      marks = marks.join(",")

      setMarks({ id: this.phoneForm.id, marks: marks }, (response) => {
        if (response.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.resetForm("phoneForm");
          this.search()
        }
      });
    },
    setAppointment() {
      this.reservationDialogVisible = false;
      setAppointment(this.reservationForm, (response) => {
        if (response.code === 200) {
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.resetForm("reservationForm");
          this.search()
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getAppointments(id) {
      getAppointments({ id: id }, (response) => {
        if (response.code === 200) {
          this.appointments = response.data;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/chain/chain/index";
</style>

<style>
.el-table thead {
  color: #2F3133;
}
.el-table th {
  background-color: #F5F7F9;
}
</style>
<style lang="scss">
.phone-cell {
  .el-icon-arrow-right {
    &::before {
      content: " " !important;
    }
  }
}
.el-table__body-wrapper .phone-cell {
  background: url(../../../assets/img/phone.png) no-repeat center;
  background-size: 1.4rem;
}
</style>
